// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

#SidebarContainer .SidebarDrafts {
    .SidebarChannel {
        height: 100%;
    }

    .SidebarLink {
        width: 100%;

        .icon {
            svg {
                fill: rgba(var(--sidebar-text-rgb), 0.75);
                vertical-align: middle;
            }
        }

        .badge {
            background: transparent;
            color: var(--sidebar-text);

            .icon.icon-draft-indicator {
                font-size: 14px !important;
            }
        }

        &:hover {
            padding-right: 16px;

            .badge {
                position: initial;
                visibility: visible;
            }
        }

        #unreadMentions {
            color: rgba(var(--sidebar-text-rgb), 0.64);
            margin-inline: 0;

            &:not(.urgent) {
                padding-inline: 0;
            }

            &.scheduledPostBadge {
                margin-left: 8px;
                padding-block: 2px;

                &.urgent {
                    color: var(--sidebar-text);
                }

                .unreadMentions {
                    position: relative;
                    top: -0.5px;
                }
            }
        }


        &.active #unreadMentions {
            color: var(--sidebar-text);
        }
    }
}


// legacy
.sidebar--left .SidebarDrafts {
    padding-bottom: 0;
    margin-top: 13px;

    .icon {
        width: auto;
        padding-left: 1px;
        margin-top: 1px;

        svg {
            fill: rgba(var(--sidebar-text-rgb), 0.75);
        }
    }

    .SidebarChannelLinkLabel_wrapper {
        display: flex;
        flex: 1;
    }

    .badge {
        margin: 0 12px 0 0;
    }
}
